<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>练习</title>
    <style>
        *{
            margin:0;
            padding: 0;
        }
        img{
            width: 400px;
        }
        .outer{

            width: 400px;
            text-align: center;
            margin: 50px auto;
        }
        .outer ul{
            list-style: none;
        }


    </style>
        <script>
            window.onload=function(){
            // 获取图片
            const imgs=document.querySelectorAll("img")[0]
            // 获取按钮
            const prev=document.querySelectorAll(".btn-wrapper .prev")[0]
            const next=document.querySelectorAll(".btn-wrapper .next")[0]
            const info=document.querySelectorAll(".info")[0]
            // 新建一个数组来存储图片路径
            img_src=[
            "./images/IMG_1.JPG",
            "./images/IMG_2.JPG",
            "./images/IMG_3.JPG",
            "./images/IMG_4.JPG",
            "./images/IMG_5.JPG",
            ]   
                
            let i=0;

            prev.onclick=function(){
                i--;
                if(i<0){
                    i=img_src.length-1
                }
                imgs.src=img_src[i]
                info.textContent=`总共${img_src.length}张图片,当前是第${i+1}张。`
                }

            next.onclick=function(){
                i++;
                if(i>img_src.length-1){
                   i=0
                }
                imgs.src=img_src[i]
                info.textContent=`总共${img_src.length}张图片,当前是第${i+1}张。`
                }
            } 
        </script>
</head>
<body>
    <div class="outer">
        <p class="info">
            总共n张图片,当前是第m张。
        </p>
        <div class="img_list">
            <img src="./images/IMG_1.JPG" alt="juilet">
        </div>
        <div class="btn-wrapper">
            <button class="prev">上一张</button>
            <button class="next">下一张</button>
        </div>
    </div>
</body>
</html>